<template>
  <div class="table">
    <a-table
      :columns="currentColumns"
      :dataSource="dataSource"
      :pagination="false"
      :rowKey="setRowKey"
      bordered
      v-bind="$attrs"
    ></a-table>
  </div>
</template>
<script>
import FileHandle from "./FileHandle.vue";
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    FileHandle,
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    columns: {
      immediate: true,
      deep: true,
      // 处理列数据
      handler(val) {
        this.currentColumns = [];
        this.$set(
          this,
          "currentColumns",
          Object.freeze([
            {
              width: 70,
              align: "center",
              title: this.$t("table.serialNumber"),
              customRender: (text, record, index) => {
                return index + 1;
              },
            },
            ...val.map((item) => {
              item.columnWidth = item.width;
              // 其他列展示数据里的html字符串
              if (item.title === this.$t("table.other")) {
                item.customRender = (text, record) => {
                  return <span domPropsInnerHTML={text}></span>;
                };
              } else if (item.render) {
                // 自定义渲染
                item.customRender = (text, record) => {
                  if (item.render === "table") {
                    return text.map((textItem) => (
                      <div>
                        {textItem.title} :{textItem.count}
                      </div>
                    ));
                  }
                  // 视频、音频、图片
                  if (["video", "audio", "img"].includes(item.render)) {
                    return (
                      <FileHandle
                        render={item.render}
                        imageStyle={{
                          width: item.width + "px",
                          height: item.width + "px",
                        }}
                        fileValue={text}
                        thumbpath={record.thumbpath || ""}
                      ></FileHandle>
                    );
                  }
                  // 文件
                  if (item.render === "file") {
                    return (
                      <FileHandle
                        imageStyle={{
                          width: item.width + "px",
                          height: item.width + "px",
                        }}
                        fileValue={text}
                        thumbpath={record.thumbpath || ""}
                      ></FileHandle>
                    );
                  }
                  return item.render;
                };
              } else {
                item.customRender = (text) => {
                  return <span>{text}</span>;
                };
              }
              return item;
            }),
          ])
        );
      },
    },
  },

  data() {
    return {
      currentColumns: [],
      curentData: [],
    };
  },
  methods: {
    setRowKey(record) {
      // console.log(record);
      return JSON.stringify(record);
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  width: 900px;

  .ant-table-wrapper::v-deep {
    .ant-table-bordered .ant-table-content {
      border-right: 1px solid #0891b4;
    }

    .ant-table-bordered .ant-table-thead > tr > th,
    .ant-table-bordered .ant-table-tbody > tr > td {
      border-right: 1px solid #649bb3;
    }

    .ant-table-bordered .ant-table-thead > tr > th:last-child,
    .ant-table-bordered .ant-table-tbody > tr > td:last-child {
      border-right: none;
    }

    .ant-table {
      color: #333333;
      border-radius: 2px;
      border: 1px solid #0891b4;
      border-right: 0;

      .ant-table-body {
        margin: 0;

        tr {
          &:hover {
            background-color: #dbeaf0;
          }

          &:nth-child(even) {
            background-color: #eceef0;
          }
        }
      }

      .ant-table-thead > tr > th {
        background-color: #428cad;
        color: #ffffff;
      }

      .ant-table-thead > tr:first-child > th:first-child,
      .ant-table-thead > tr:last-child > th:last-child {
        border-radius: 0;
      }
    }

    td {
      table.customTable {
        border-collapse: collapse;
      }
    }
  }
}
</style>
